<template>
	<view>
		<header-safearea title="点餐"></header-safearea>

		<view class="call-count">
			<view class="item" 
				@click="count=item" 
				:class="item === count ? 'active': ''" 
				v-for="item in 16" 
				:key="item"
			>
				{{item}}
			</view>
		</view>

		<button type="primary" @click="toTab">开始点餐</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const count = ref(0)
	const toTab = () => {
		uni.navigateTo({
			url: '/pages/tab/tab'
		})
	}
</script>

<style lang="scss">
	.call-count {
		display: flex;
		padding: 20rpx;
		flex-wrap: wrap;

		.item {
			width: 22%;
			background-color: pink;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;

			&.active {
				background-color: #ff0000;
			}
		}
	}
</style>